<template>
	<div class="lucky_flop">
    <div id="main" class="flop_main">
      <img class="top-img" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img1.png" alt="">
      <div :class="['roll_new_top', need_subscribe?'fxBtn-publicode':'rollList']" >
        <ul class="clearfix" >
          <div class="ro_list ro_list1">
              <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img3.png" width="18" alt="" class="roll_new_img3">
              <li class="ro1" @click="handleClick(1)">
                  <a href="javascript:;" class="jiangpin">
                      <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fanpaizi.png" alt="">
                      <p>谢谢</p>
                  </a>
                  <img v-show="isShowHand1" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img4.png" width="35" alt="" class="roll_new_img4">
              </li>
              <li class="ro2" @click="handleClick(2)">
                  <a href="javascript:;" class="jiangpin">
                      <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fanpaizi.png" alt="">
                      <p>谢谢</p>
                  </a>
                  <img v-show="isShowHand2" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img4.png" width="35" alt="" class="roll_new_img4">
              </li>
              <li class="ro3" @click="handleClick(3)">
                  <a href="javascript:;" class="jiangpin">
                      <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fanpaizi.png" alt="">
                      <p>谢谢</p>
                  </a>
                  <img v-show="isShowHand3" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img4.png" width="35" alt="" class="roll_new_img4">
              </li>
            </div>
            <div  class="ro_list ro_list2" >
                <li class="ro4" @click="handleClick(4)">
                    <a href="javascript:;" class="jiangpin">
                        <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fanpaizi.png" alt="">
                        <p>谢谢</p>
                    </a>
                    <img v-show="isShowHand4" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img4.png" width="35" alt="" class="roll_new_img4">
                </li>
                <li class="ro5 " @click="handleClick(5)">
                    <a href="javascript:;" class="jiangpin">
                        <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fanpaizi.png" alt="">
                        <p>谢谢</p>
                    </a>
                    <img v-show="isShowHand5" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img4.png" width="35" alt="" class="roll_new_img4">
                </li>
                <li class="ro6" @click="handleClick(6)">
                    <a href="javascript:;" class="jiangpin">
                        <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fanpaizi.png" alt="">
                        <p>谢谢</p>
                    </a>
                    <img v-show="isShowHand6" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img4.png" width="35" alt="" class="roll_new_img4">
                </li>
            </div>
        </ul>
      </div>
      <!-- 游戏奖品 -->
      <img class="game-img" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/roll_new_img2.png" alt="">
      <div class="roll_new_bottom">
			  <ul class="clearfix">
          <li v-for="(item,idx) in gameprizeinfo" :key="idx">
            <div>
              <img v-if="item.prize_type == 0" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/game_record_point.png" alt="">
              <img v-else-if="item.prize_type == 1" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/youhuiquan.png" alt="">
              <img v-else-if="item.prize_type == 2" :src="item.pic" alt="">
            </div>
            <p v-if="idx == 0">一等奖</p>
            <p v-else-if="idx == 1">二等奖</p>
            <p v-else-if="idx == 2">三等奖</p>
            <p v-else-if="idx == 3">普通奖</p>
          </li>
        </ul>
      </div>
      <!-- 活动时间 -->
      <div class="roll_new_ins">
        <b>活动时间
          <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fengexian.png" alt="">
        </b>
        <p>{{ gameinfo.start_time }} 至 {{ gameinfo.end_time }}</p>
      </div>
      <!-- 游戏说明 -->
		  <div class="roll_new_ins">
        <b>游戏说明
          <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fengexian.png" alt="">
        </b>
        <p v-if="gameinfo.cost_point != 0">游戏消耗{{ point_name }} {{ gameinfo.cost_point }}{{point_name}}</p>
        <p v-if="gameinfo.give_point != 0">参与游戏即送{{ gameinfo.give_point }}{{ point_name }},
          <span v-if="gameinfo.give_point_to_no_prize_only == 1">仅送给未中奖的用户.</span>
        </p>
        <p class="wordWrap">{{ gameinfo.description }}</p>
      </div>
      <!-- 中奖名单 -->
      <div class="win-record win-record_new_roll">
        <b>中奖排名
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fengexian.png" alt="">
        </b>
        <div class="record_table">
          <div class="win-nav">
            <span>昵称</span>
            <span>奖品</span>
            <span>等级</span>
            <span>中奖时间</span>
          </div>
          <div class="win-list-con">
            <ul>
              <wx-scroll-view :scroll-y="canScrollY" style="height:250px" @scrolltolower="onLoad">
                <li v-for="(item, index) in winerLists" :key="index">
                  <span class="win-name">{{ item.nickname }}</span>
                  <span class="win-award">{{ item.winer }}</span>
                  <span class="win-award">{{ item.level }}</span>
                  <span class="win-time">{{ item.create_time }}</span>
                </li>
              </wx-scroll-view>
            </ul>
          </div>
          <!-- <notempty name="winer_lists">
							<a href="javascript:;" class="loadmore j-loadmore"><span>加载更多</span><i class="loadmore-icon"></i></a>
							<span class="loadmore loadmore-noMoreData j-noMoreData">没有更多数据</span>
					</notempty> -->
        </div>
        <p class="chakan">
            <a @click="JumpTo">查看我的奖品<img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/jiangpin_right_roll.png" alt="" height="9"> </a>
        </p>
      </div>



    </div>
     <game-result-dialog
        :visible.sync="gameResultVisible"
        :game_prize_id="game_prize_id"
        :getGamePrize="getGamePrize"
        @gameReload="gameReload"></game-result-dialog>
    <shop-code ref="shopCode" :fromType="1"></shop-code>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>


<script>
  import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)

  import gameResultDialog from '../components/gameResultDialog'
  import ShopCode from '@/components/ShopCode'
  import { activityGame, playGames } from '@/api/marketGame/gameList'
  import { refreshPage, mpShare } from '@/utils/utils'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        canScrollY: true,
        handLoop: null,
        isShowHand1: false,
        isShowHand2: false,
        isShowHand3: false,
        isShowHand4: false,
        isShowHand5: false,
        isShowHand6: false,
        loading: false,
        finished: false,
        gameResultVisible: false, // 游戏结果弹窗
        gameinfo: {},
        gameprizeinfo: [],
        point_name: '',
        cost_point: '',
        give_point: '',
        winerLists: [],
        postParm: {},
        postData: {
          type: 3,
          id: '',
          order_id: '',
          p: 1
        },
        need_subscribe: 0,
        game_prize_id: '', // 获奖数据
        getGamePrize: false, // 中奖或是未中奖
        clickTrue: true
      }
    },
    components: {
      gameResultDialog,
      SmallLogin,
      ShopCode
    },
    methods: {
      onLoad() {
        this.activityGameFn()
        this.AutoLoopHand()
      },
      JumpTo() {
        this.$JumpName(this, 'prize-list')
      },
      // 手指动画
      AutoLoopHand(step) {
        this.clearAutoLoopHand()
        step = step || 1
        this.handLoop = setInterval(() => {
          if (step == 7) {
            step = 1
            this.isShowHand6 = false
          }
          this[`isShowHand${step - 1}`] = false
          this[`isShowHand${step}`] = true
          step++
        }, 1000)
      },
      clearAutoLoopHand() {
        clearInterval(this.handLoop)
        for (let i = 0; i < 7; i++) {
          this[`isShowHand${i}`] = false
        }
      },
      /**
       * 点击翻牌
       */
      handleClick(step) {
        this.clearAutoLoopHand()
        this[`isShowHand${step}`] = true
        this.$loadingWrap.show()
        if (this.clickTrue) {
          this.clickTrue = false
        } else {
          return false
        }
        playGames(this.postParm).then(res => {
          this.clickTrue = true
          this.$loadingWrap.close()
          const resData = res.data
          if (res.status == 1) {
            if (resData.game_parameter) {
              this.game_prize_id = res.data.game_parameter.game_prize_id
              // 处理翻转
              // TODO 原生js处理
              this.fadeIn(document.querySelectorAll('.roll_new_img4')[step - 1], 1, 6000)
              this.fadeOut(document.querySelectorAll('.jiangpin')[step - 1], 0, 6000)
              if (this.game_prize_id.game_prize_id !== 0) {
                document.querySelectorAll('.jiangpin')[step - 1].querySelector('p').innerText = this.game_prize_id.prize
                if (this.game_prize_id.img) {
                  document.querySelectorAll('.jiangpin')[step - 1].querySelector('img').setAttribute('src', this.game_prize_id.img)
                } else {
                  document.querySelectorAll('.jiangpin')[step - 1].querySelector('img').style.display = 'none'
                  document.querySelectorAll('.jiangpin')[step - 1].querySelector('p').style.marginTop = '50px'
                }
              } else {
                document.querySelectorAll('.jiangpin')[step - 1].querySelector('p').innerText = '谢谢'
                document.querySelectorAll('.jiangpin')[step - 1].querySelector('p').style.marginTop = '50px'
                document.querySelectorAll('.jiangpin')[step - 1].querySelector('img').style.display = 'none'
              }
              setTimeout(() => {
                this.gameResultVisible = true
              }, 1000)
              if (resData.game_parameter.ds && resData.game_parameter.ds.winning_value == 1) {
                this.getGamePrize = true
              } else {
                this.getGamePrize = false
                if (resData.game_parameter.notwinning) {
                  const baseMsg = this.gameinfo.give_point > 0 ? `,别灰心参与也有${this.gameinfo.give_point}${this.point_name}` : ''
                  const noPrizeMsg = resData.game_parameter.notwinning + baseMsg
                  this.game_prize_id.noPrizeMsg = noPrizeMsg
                }
              }
            }
          } else {
            this.getGamePrize = false
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 游戏的默认请求
       */
      activityGameFn() {
        activityGame(this.postParm).then(res => {
          if (res.status == 1) {
            const resData = res.data
            this.need_subscribe = resData.need_subscribe
            if (resData.need_subscribe == 1) {
              this.$refs.shopCode.dialogVisible = true
              return false
            }
            this.gameprizeinfo = resData.gameprizeinfo
            this.winerLists = this.winerLists.concat(resData.winer_lists)
            this.gameinfo = resData.gameinfo
            this.point_name = resData.point_name
            this.cost_point = resData.cost_point
            this.give_point = resData.give_point
            // 加载状态结束
            this.loading = false
            if (resData.winer_lists.length < 10) {
              this.finished = true
            }
            this.shareInfo = {
              title: resData.jsapi_title,
              imgUrl: resData.jsapi_img,
              shareParam: resData.jsapi_url.split('?')[1]
            }
            this.postParm.p++
            mpShare(true, false, '/activity/pages/luckyFlop/index', this.shareInfo)
          } else {
            // this.$Error(res.msg)
          }
        })
      },
      init() {
        const param = Object.assign({}, this.postData)
        param.id = this.$route.query.id
        if (this.$route.query.id) {
          param.order_id = this.$route.query.order_id
        }
        this.postParm = param
        this.activityGameFn()
      },
      // TODO 原生js实现fadeIn
      fadeIn(ele, opacity, speed) {
        // console.log(ele,'elem')
        if (ele) {
            var v = ele.style.opacity;
            v < 1 && (v = v * 100);
            var count = speed / 1000;
            var avg = count < 2 ? (opacity / count) : (opacity / count - 1);
            var timer = null;
            timer = setInterval(function() {
                if (v < opacity) {
                    v += avg;
                    ele.style.opacity = v / 100;
                } else {
                    clearInterval(timer);
                }
            }, 500);
        }
      },
      // TODO 原生js实现fadeOut
      fadeOut(ele, opacity, speed) {
        // console.log(ele,'elem')
        if (ele) {
            var v = ele.style.opacity || 100;
            v < 1 && (v = v * 100);
            var count = speed / 1000;
            var avg = (100 - opacity) / count;
            var timer = null;
            timer = setInterval(function() {
                if (v - avg > opacity) {
                    v -= avg;
                    ele.style.opacity = v / 100;
                } else {
                    clearInterval(timer);
                }
            }, 500);
        }
      },
      gameReload(){
        refreshPage(this)
        this.init()
      }
    },
    mounted() {
      this.init()
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
      window.addEventListener('wxshow', () => {
        small.HandleShareParams()
        if(!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
      window.$$subscribe('loginReload', reload => {
        if (reload) {
          this.init()
        }
      })
    }
  })
</script>

<style lang="scss">
.lucky_flop{
  background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame//roll.png) no-repeat #ca0b37;
  background-size: 100% auto;
  padding-bottom: 30px;
}
.roll_new_top{
    z-index: 10;
}
.membersbox{
    z-index: 11;
}
.members_bottom section:first-child a{
    color: #fff;
}
.flop_main{
  .top-img {
    width: 750px;
    height: 356px;
  }
  .game-img {
    width: 750px;
    height: 250px;
  }
  .roll_new_top {
      width: 100%;
      height: auto;
      ul {
          width: 650px;
          margin: 0 auto;
          .ro_list {
              width: 100%;
              height: 232px;
              display: flex;
              display:-webkit-box;
              display:-webkit-flex;
              flex-wrap: wrap;
              -webkit-flex-wrap: wrap;
              -moz-flex-wrap: wrap;
              &.ro_list1 {
                  margin-bottom: 38px;
                  position: relative;
                  .roll_new_img3 {
                      position: absolute;
                      left: -36px;
                      bottom: -28px;
                  }
              }
              li {
                  width: 192px;
                  height: 100%;
                  text-align: center;
                  line-height: 140px;
                  color: #fff;
                  font-weight: bold;
                  text-shadow: -2px -2px 6px #000;
                  background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/fanpaizi.png) no-repeat;
                  background-size: 100% 100%;
                  transition: 0.3s;
                  -moz-transition: 0.3s;
                  -webkit-transition: 0.3s;
                  -o-transition: 0.3s;
                  box-shadow: 0px 0px 30px 4px rgba(0,0,0,.2);
                  position: relative;
                  .roll_new_img4 {
                      position: absolute;
                      right: -34px;
                      bottom: -30px;
                  }
                  &.ro2,
                  &.ro5 {
                      margin: 0 auto;
                  }
                  .jiangpin {
                      display: none;
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      left: 0;
                      z-index: 2;
                      background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/jiangpin.png) no-repeat;
                      background-size: 100% 100%;
                      img {
                          margin-top: 20px;
                          width: 150px;
                          height: 150px;
                      }
                      p {
                          margin-top: 10px;
                          line-height: 100%;
                          color: #e71440;
                          font-weight: normal;
                          text-shadow: none;
                      }
                  }
                  b {
                      display: inline-block;
                      width: 140px;
                      height: 140px;
                      font-size: 60px;
                  }
                  &.cur {
                      width: 192px;
                      height: 100%;
                      transform: rotateX(360deg) rotateY(-180deg);
                      -webkit-transform: rotateX(360deg) rotateY(-180deg);
                      -moz-transform: rotateX(360deg) rotateY(-180deg);
                      & >.jiangpin {
                          -webkit-transform: rotateX(360deg) rotateY(-180deg);
                          display: block;
                      }
                      & b,
                      & span {
                          display: inline-block;
                          -webkit-transform: rotateX(0) rotateY(0);
                          transform: rotateX(0) rotateY(0);
                          -moz-transform: rotateX(0) rotateY(0);
                      }
                  }
              }
          }
      }
  }
  .roll_new_bottom {
    width: 650px;
    margin: 0 auto;
    padding: 22px 0;
    color: #fff;
    background: #ffcb3e;
    border-radius: 16px;
    overflow: hidden;
    ul {
      display: flex;
      display:-webkit-box;
      display:-webkit-flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      li {
        flex-direction:space-between;
        width: 140px;
        height: 192px;
        line-height: 50px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/flopGame/list.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        margin-right: 20px;
        border-radius: 20px;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
        div {
          width: 80px;
          height: 80px;
          margin: 30px auto 16px;
          img {
            width: 100%;
            height: 100%;
          }
          span {
            line-height: 80px;
            text-align: center;
          }
        }
        p {
          line-height: 100%;
          color: #fee44b;
        }
        &:first-child {
          margin-left: 16px;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .roll_new_ins {
    width: 650px;
    padding: 30px;
    background-color: #fff;
    margin: 24px auto;
    border-radius: 16px;
    b {
      margin: 16px auto;
      text-align: center;
      display: block;
      width: 394px;
      position: relative;
      color: #f01b60;
      font-size: 28px;
      line-height: 30px;
      img {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
      }
      p {
        color: #333;
      }
    }
  }
  .win-record_new_roll {
    width: 650px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #fff;
    border-radius: 16px;
    padding: 24px 24px 0;
    b {
        margin: 20px auto;
        text-align: center;
        display: block;
        width: 394px;
        position: relative;
        color: #f01b60;
        font-size: 24px;
        line-height: 30px;
        img {
            width: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }
    }
    .record_table {
      .win-nav {
        border-bottom: 1px solid #ebe4e4;
        overflow: hidden;
        span {
          float: left;
          width: 25%;
          height: 80px;
          line-height: 80px;
          color: #333;
          text-align: center;
          font-weight: bold;
          &:nth-child(1) {
            width:20%;
            text-align: left;
          }
          &:nth-child(2) {
            width:30%;
          }
          &:nth-child(4) {
            text-align: right;
          }
        }
      }
      .win-list-con {
        height: 500px;
        overflow: auto;
        ul {
          padding: 0;
          border-radius: 0;
          li {
            width: 602px;
            border-bottom: 1px dashed #ebe4e4;
            line-height: 100px;
            // padding:28px 0 30px;
            box-sizing: border-box;
            overflow: hidden;
            span {
              float: left;
              width: 25%;
              border: 0;
              color: #333;
              font-size: 20px;
              height: auto;
              text-align: center;
              &:nth-child(4) {
                text-align: right;
              }
              &:nth-child(1) {
                width:20%;
                text-align: left;
              }
              &:nth-child(2) {
                width:30%;
              }
            }
          }
        }
      }
    }
    .chakan{
      width: 100%;
      height: auto;
      text-align: center;
      padding: 20px 0;
      a{
        color:#f01b60;
        display: inline-block;
        width: 220px;
        height: 56px;
        font-size: 26px;
        line-height: 56px;
        img {
          width: 10px;
          height: 26px!important;
          margin-top: -4px;
          margin-left: 6px;
        }
      }
    }
  }
}
</style>
